<template>
	<el-row class="type">
		<el-tag class="tag" v-for="tag in learnType" :key="tag.id" closable :disable-transitions="false" @close="handleClose(tag.id)">{{ tag.name }}</el-tag>
		<el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" style="width: 100px;" size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
		<el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">+ New Tag</el-button>
	</el-row>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref, nextTick } from 'vue';
import { useMainStore } from '@/store/index.js';
import { storeToRefs } from 'pinia';
const { proxy } = getCurrentInstance();
const inputValue = ref('');
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();


//引入piana
const mainStore = useMainStore();
const { learnType } = storeToRefs(mainStore);
mainStore.getLearnType()

//确定新增
function handleInputConfirm() {
	if (inputValue.value) {
		proxy
			.$post('/type/add', {
				name: inputValue.value
			})
			.then(res => {
				console.log(res);
				mainStore.getLearnType()
			});
	}
	inputVisible.value = false;
	inputValue.value = '';
}
//删除数据
function handleClose(id: number) {
	console.log(id);
	proxy
		.$post('/type/delete', {
			id
		})
		.then(res => {
			if (res.code === 200) {
				mainStore.getLearnType()
			}
		});
}
// 准备新增
function showInput() {
	inputVisible.value = true;
	nextTick(() => {
		InputRef.value!.input!.focus();
	});
}
</script>

<style scoped>
	.tag{
		margin-right: 10px;
	}
</style>
